<!--
 * @Author: 追逐的娃 kangchao_php@163.com
 * @Date: 2024-06-28 09:37:50
 * @LastEditors: kangchao kangchao@sxdata.com.cn
 * @LastEditTime: 2024-11-11 16:00:55
 * @FilePath: \vue-project\src\views\Common\components\PasswordLogin.vue
 * @Description: 
 * 
-->
<template>
  <div>
    <ant-form ref="loginFormRef" :formFields="formFields" :formConfig="formConfig" :rules="rules" />
    <a-button type="primary" long @click="submit" :loading="loading">{{
      $t('login.btnText')
    }}</a-button>
    <div class="mt-2 flex items-start">
      <a-checkbox v-model="checked" class="mt-1"></a-checkbox
      ><span class="mx-2"
        >{{ $t('login.agreement') }}<a-link href="javadcript:;" @click="openAgreement('user')">{{ $t('login.user') }}</a-link
        >、<a-link href="javadcript:;" @click="openAgreement('privacy')">{{ $t('login.privacy') }}</a-link></span
      >
    </div>
  </div>
  <Vcode :show="isShow" @success="onSuccess" @close="onClose" />
  <AgreementModal ref="agreementRef" :agreementType="agreementType"/>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useUserStore } from '@/stores'
import { useRouter } from 'vue-router'
import Vcode from 'vue3-puzzle-vcode'
import { Message } from '@arco-design/web-vue'
import AgreementModal from "./AgreementModal.vue";

const router = useRouter()
const store = useUserStore()

const agreementType = ref('user')
const agreementRef = ref(null)
const checked = ref(false)
const loading = ref(false)
const loginFormRef = ref(null)
//表单配置
const formConfig = reactive({
  width: '100%'
})
//表单字段配置
const formFields = reactive([
  {
    type: 'input',
    prop: 'username',
    label: '',
    placeholder: '用户名',
    defaultValue: 'admin'
  },
  {
    type: 'password',
    prop: 'password',
    label: '',
    placeholder: '密码',
    defaultValue: 'admin'
  }
])
//验证规则
const rules = reactive({
  username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
  password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
})

//登录按钮触发
const submit = async () => {
  //检查是否同意协议
  if (!checked.value) return Message.warning('请先阅读并同意协议')
  //验证状态
  let validStatus = await loginFormRef.value.validateForm()
  if (validStatus == undefined) {
    isShow.value = true
  }
}
const isShow = ref(false)
//成功的回调
const onSuccess = async () => {
  //关闭验证框
  isShow.value = false

  loading.value = true
  let res = await store.accountLogin(loginFormRef.value.form)
  if (res.code === 200) {
    //条转到后台首页
    router.push('/')
  }
  loading.value = false
}
//关闭的回调
const onClose = () => {
  isShow.value = false
}
//查看协议
const openAgreement = (type) => {
  agreementType.value = type
  agreementRef.value.open()
}
</script>

<style lang="scss" scoped></style>
